<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="all.css">
  </head>
  <body>
    <div class="container-fluid" style="padding:0;">
      <header class="header">
        <div class="row justify-content-between">
        <div class="col-2" style="padding-left:0;">
          <a class="header_logo"></a>
        </div>
        <div class="col-auto">
        </div>
        <div class="col-2 col-sm-8">
          <ul class="nav justify-content-end max_menu_div">
            <li class="nav-item">
              <a class="nav-link " href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="product.html">Product</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contactus.html">Contact Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="login.html"><img src="images/header_icon_login.png" style="width:1rem;margin-right:0.5rem;">Login</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="register.html"><img src="images/header_icon_login.png" style="width:1rem;margin-right:0.5rem;">Register</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                English
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#"><span class="lang_zh"></span>中文(简体)</a>
                <a class="dropdown-item" href="#"><span class="lang_en"></span>English</a>
                <div class="dropdown-divider"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="dropdown min_menu_div">
        <a class="nav-link dropdown-toggle" style="text-align:right;" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Menu
        </a>
        <div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="index.html">Home<span style="float:right;">&gt;</span></a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item active" href="product.html">Product<span style="float:right;">&gt;</span></a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="contactus.html">Contact Us<span style="float:right;">&gt;</span></a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Login / Register<span style="float:right;">&gt;</span></a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">English 中文(简体)</a>
        </div>
      </div>

      </header>


      <div class="banner">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="images/pdbanner1.png" alt="First slide">
        <div class="bannercontent w-100 h-100">
          <div class="webanner3">
            <div class="text1">The Future Of <span>Intelligent</span><br/>Robots Is Here</div>
            <div class="text2">Informationdistributio | Activity management <br/>Efficient operating</div>
          </div>
          <img class="banner3robot" src="images/banner3robot.png"/>
        </div>
      </div>


      </div>
      </div>

      </div>



    <div class="productfeatures" style="margin-top:2rem;">
      <h3>Features</h3>
      <div class="h3line"></div>

      <div class="row justify-content-center" style="position:relative">
        <div class="col-12 col-sm-6">
          <div class="pdfeaturesbox">

            <img src="images/producttype_boxic1.png" class="box-icon"/>
            <div>
              A Token of carnival<br/>
              Precise operation mechanism<br/>
              Effectively eliminates duplicate user statistics from
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-right">
          <div class="pdfeaturesbox">
            <img src="images/producttype_boxic2.png" class="box-icon"/>
            <div>
              A Token of carnival<br/>
              Precise operation mechanism<br/>
              Effectively eliminates duplicate user statistics from
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6">
          <div class="pdfeaturesbox">
            <img src="images/producttype_boxic3.png" class="box-icon"/>
            <div>
              A Token of carnival<br/>
              Precise operation mechanism<br/>
              Effectively eliminates duplicate user statistics from
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-right">
          <div class="pdfeaturesbox">
            <img src="images/producttype_boxic4.png" class="box-icon"/>
            <div>
              A Token of carnival<br/>
              Precise operation mechanism<br/>
              Effectively eliminates duplicate user statistics from
            </div>
          </div>
        </div>

        <div class="product_lines"></div>
      </div>


      <div class="row justify-content-center" style="text-align:center;padding:0 5%;">
        <div class="col-6 col-sm-4">
          <div class="productfeaturesphonect">
            <img src="images/producttype_phonect1.png"/>
          </div>
          <span class="productfeatures_txt">the Airdrop Reward activity</span>
        </div>
        <div class="col-6 col-sm-4">
          <div class="productfeaturesphonect">
            <img src="images/producttype_phonect2.png"/>
          </div>
          <span class="productfeatures_txt">Anti-spam function</span>
        </div>
        <div class="col-6 col-sm-4">
          <div class="productfeaturesphonect">
            <img src="images/producttype_phonect3.png"/>
          </div>
          <span class="productfeatures_txt">Massive users operation</span>
        </div>
        <div class="col-6 sm-display-none">
          <div class="productfeaturesphonect">
            <div>TokenMan is based on DeepQA technology,Accurate semantic recognition ability.Excellent user,information, activity managenment skills. Is the most intelligent robot in community at present. Teh development team excavation the AI technology fro TokenMan,try to make the intermational community managemnet more efficient.</div>
          </div>
        </div>
      </div>
      <div class="productfeatures_body sm-display-block">
        TokenMan is based on DeepQA technology,Accurate semantic recognition ability.Excellent user,information, activity managenment skills. Is the most intelligent robot in community at present. Teh development team excavation the AI technology fro TokenMan,try to make the intermational community managemnet more efficient.
      </div>
    </div>


  <div class="producttype">
    <h3>Product type</h3>
    <div class="h3line"></div>
    <div class="producttypebody">
      <div class="row justify-content-center">
      <div class="col-12 col-md-6 buy_ct_left">
          <div class="st_buy_ct">
              <div class="buy_ct_title">
                  Standard account
                  <span style="float:right;">0.5BTC / YEAR</span>
              </div>
              <div class="buy_ct_body">
                <h6>Service</h6>
                Functions and Permissions<br/>
                Release information<br/>
                Up to 15 interaction replies<br/>
                the Airdrop Reward activity<br/>
                Anti-spam function<br/>
                <div class="buy_button" id="buy_btn_1">Buy Now</div>

              </div>
          </div>
      </div>
      <div class="col-12 col-md-6 buy_ct_right">
        <div class="st_buy_ct">
            <div class="buy_ct_title">
                Senior account
                <span style="float:right;">1.0BTC / YEAR</span>
            </div>
            <div class="buy_ct_body">
              <h6>Service</h6>
              Functions and Permissions<br/>
              Release information<br/>
              Up to 30 interaction replies<br/>
              the Airdrop Reward activity<br/>
              Anti-spam function<br/>
              Fixed Billiboards<br/>
              Currency pnce display<br/>
              <div class="buy_button" id="buy_btn_2">Buy Now</div>

            </div>
        </div>
      </div>
    </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade " id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog order_dialog" role="document">
      <div class="modal-content">
        <div id="order_ct1">
        <div class="order_dialog_header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
          </button>
          <h5 class="modal-title">Order Confirm</h5>
        </div>
        <div class="modal-body">
          <div class="order_title"><img src="images/order_user_icon.png"/> Standard account 0.5BTC/YEAR</div>
          <div class="pdl weight">Service</div>
          <div class="pdl" style="width:4rem;margin-top:0.5rem;"><div class="order_line"></div></div>
          <div class="pdl mt1">
            Functions and Permissions<br/>
            Release information<br/>
            Up to 15 interaction replies<br/>
            the Airdrop Reward activity<br/>
            Anti-spam function
          </div>
          <div class="pdl mt1" style="margin-right:2rem;"><div class="order_line"></div></div>
          <div class="pdl weight mt1">Method of payment</div>
          <div class="form-check pdl mt1">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Wallet transfer, support equivalent BTC.</label>
          </div>
          <div class="form-check pdl">
            <input type="checkbox" class="form-check-input" id="exampleCheck2">
            <label class="form-check-label" for="exampleCheck2">Wallet transfer, support equivalent ETH.</label>
          </div>
          <div style="text-align: center;">
            <div class="buy_button" style="position:static;margin:2rem auto;" id="order_config_btn1">confirm purchase</div>
          </div>
        </div>
        </div>
        <div id="order_ct2" style="display:none;">
        <div class="order_dialog_header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
          </button>
          <h5 class="modal-title">Order Confirm</h5>
        </div>
        <div class="modal-body" style="text-align:center">
          <div class="pdl mt1">
            The order is manually confirmed by<br/>
            the customer service<br/>
            and we will contact you after confirmation.<br/>
          </div>
          <div class="pdl mt1" style="margin-right:2rem;"><div class="order_line"></div></div>
          <div class="pdl mt1">if the waiting time ios too long<br/>
            you can contact our Telegram:Official_TokenMan
          </div>

          <div style="text-align: center;">
            <div class="buy_button" style="position:static;margin:2rem auto;" id="order_config_btn2">ok</div>
          </div>
        </div>
        </div>
        <div id="order_ct3" style="display:none;">
        <div class="order_dialog_header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
          </button>
          <h5 class="modal-title">Payment</h5>
        </div>
        <div class="modal-body" style="">
          <div class="order_title"><img src="images/order_user_icon.png"/> Standard account 0.5BTC/YEAR</div>
          <div class="pdl weight mt1">Method of payment</div>
          <div class="form-check pdl">
            <input type="checkbox" class="form-check-input" id="exampleCheck3">
            <label class="form-check-label" for="exampleCheck3">Wallet transfer, support equivalent BTH.</label>
          </div>
          <div class="pdl mt1" style="margin-right:2rem;"><div class="order_line"></div></div>

          <div class="pdl mt1">Please transfer to the following wallet address 1.0BTH
          </div>

          <div style="text-align: center;">
            <div class="buy_button" style="position:static;margin:2rem auto;" data-dismiss="modal">Successful transfer</div>
          </div>
        </div>
        </div>

      </div>
    </div>
  </div>


      <div class="m_footer" style="background:#040d17;height:17.15rem;font-size:0.8rem;color:#ffffff;">
        <div style="text-align:center;padding-top:2.1rem;">
          <img src="images/footerflay.png" style="width:1rem;margin-right:1.2rem;"/>
          <img src="images/footertwt.png" style="width:1rem;margin-right:1.2rem;"/>
          <img src="images/footerfb.png" style="width:0.5rem;margin-right:1.2rem;"/>
          <img src="images/footerwx.png" style="width:1.1rem;"/>
        </div>
        <div class="text-center" style="padding-top: 2.1rem;">
            <span><img src="images/footermail.png" style="height:0.6rem;display: inline-block;margin-bottom: 0.2rem;margin-right:0.1rem;"/> E-mail:business@if1989.com</span>
            <br class="footer_br"/>
            <span style="padding-left:2rem;"><img src="images/footeradd.png"  style="height:0.8rem;display: inline-block;margin-bottom: 0.2rem;margin-right:0.3rem;"/>Add：Urwork，Floors，NO.C3,JiuxianqiaoRoad，Chaoyang District,Beijing</span>
        </div>
        <div class="text-center privssrvice" style="padding-top: 1.2rem;">
          <span>@Privacy Policy</span>
          <span style="padding:0 2rem;">@Intellectual Property Rights Policy</span>
          <span>@Tems of service</span>
        </div>
        <div class="text-center" style="padding-top: 2rem;color:">
          <a style="margin-right:1rem;" href="index.html">Home</a> | <a style="margin:0 1rem;" href="product.html">Product</a> | <a style="margin-left:1rem" href="contactus.html">Contact Us</a>
        </div>
    </div>
  </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>

    $('#order_config_btn1').click(function(){
      $('#order_ct1').hide();
      $('#order_ct2').show();
    });

    $('#order_config_btn2').click(function(){
      $('#order_ct2').hide();
      $('#order_ct3').show();
    });

    $('#buy_btn_2,#buy_btn_1').click(function() {
      $('#order_ct1').show();
      $('#order_ct2').hide();
      $('#order_ct3').hide();
      $('#exampleModalLong').modal({});
    });

    </script>
  </body>
</html>
